<template>
  <div class="video-c">
    <div class="c-t">
      <div class="list">
        <template v-for="(item, index) in baseList">
          <div
            class="list-item"
            :key="index"
            :title="item.baseName"
            @click="changeJD(item, index)"
            :style="{ color: activeJD === index ? '#fff' : 'rgba(255, 255, 255, 0.4)' }"
          >
            {{ item.baseName }}
          </div>
        </template>
      </div>
      <div class="v-b">
        <vueVideo :url="url" v-if="url && showVedio" style="margin-top: 5px" />
      </div>
      <div class="n-c">
        <div class="n" :title="videoName">{{ videoName }}</div>
        <div class="btn" @click="changeVideo">切换视频</div>
      </div>
      <div class="c-v-c" v-if="showchange">
        <div class="action">
          <div>切换视频</div>
          <div @click="close" class="close" />
        </div>
        <div class="c-item-c">
          <template v-if="!cVideo.length">
            <div style="font-size: 12px">暂无更多～</div>
          </template>
          <template v-for="(video, index) in cVideo">
            <div class="c-item" :key="index" @click="getVideo(video, index)">
              <div class="c-item-bg" :class="showBorder === index ? 's-border' : ''" />
              <div class="c-item-n">{{ video.name }}</div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import vueVideo from './vueVideo.vue'
import { getBaseListVideo, getBaseResourceList } from '@/api/dashboards'
export default {
  components: { vueVideo },
  data() {
    return {
      showVedio: true,
      showBorder: undefined,
      activeJD: 0,
      activeData: {},
      showchange: false,
      baseList: [],
      url: '',
      cVideo: [],
      timer: null,
      total: [],
    }
  },
  mounted() {
    this.getBaseListVideo().then(() => {
      this.autoPlay(0)
    })
  },
  methods: {
    autoPlay(index) {
      var that = this
      let start = index
      var dataLength = this.baseList.length - 1
      this.timer && clearInterval(this.timer)
      this.timer = setInterval(function () {
        start++
        if (start > dataLength) {
          start = 0
        }
        that.changeJD(that.baseList[start], start)
      }, 10000)
    },
    close() {
      this.showchange = false
      this.showBorder = undefined
    },
    changeJD(item, index) {
      this.showBorder = undefined
      this.timer && clearInterval(this.timer)
      this.activeJD = index
      this.activeData = item
      this.videoName = item.name
      this.url = item.fileUrl
      this.showVedio = false
      setTimeout(() => {
        this.showVedio = true
      }, 0)
      if (this.showchange) {
        this.showchange = false
      }
      this.autoPlay(index)
    },
    changeVideo() {
      this.showchange = !this.showchange
      this.getBaseResourceList(this.activeData.baseId)
    },
    getVideo(data, index) {
      this.showBorder = index
      this.url = data.fileUrl
      this.showVedio = false
      setTimeout(() => {
        this.showVedio = true
      }, 0)
      this.baseList.map((item, index) => {
        if (item.baseId === data.baseId) {
          this.timer && clearInterval(this.timer)
          this.activeJD = index
          this.activeData = data
          this.videoName = data.name
          this.url = data.fileUrl
          this.autoPlay(index)
        }
      })
    },
    async getBaseListVideo() {
      let res = await getBaseListVideo()
      if (res.success) {
        this.baseList = res.result
        if (this.baseList.length) {
          this.activeData = this.baseList[0]
          this.videoName = this.baseList[0].name
          this.url = this.baseList[0].fileUrl
          this.baseList.map((item) => {
            this.getBaseResourceList(item.baseId)
          })
        }
      } else {
        this.$message.warning(res.message)
      }
    },
    async getBaseResourceList(id) {
      let res = await getBaseResourceList({ id: id })
      if (res.success) {
        this.cVideo = res.result
        if (this.cVideo.length) {
          this.total.push(this.cVideo.length)
        }
       let all = this.total.reduce((n,m) => n + m)
        this.$emit('getVideoNums',all)
      } else {
        this.$message.warning(res.message)
      }
    },
  },
}
</script>
<style lang="less" scoped>
.video-c {
  ::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }
  ::-webkit-scrollbar-track {
    background: rgba(11, 17, 51, 0.85);
    border-radius: 2px;
  }
  ::-webkit-scrollbar-thumb {
    background: #ffffff;
    border-radius: 2px;
  }
  .c-t {
    position: relative;
    .list {
      width: 260px;
      overflow: hidden;
      overflow-x: scroll;
      display: flex;
      align-items: center;
      font-size: 12px;
      text-align: center;
      .list-item {
        color: #fff;
        padding: 0 8px;
        min-width: 70px;
        height: 30px;
        line-height: 30px;
        background: url('../assets/video.png') no-repeat;
        background-size: 100% 100%;
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .v-b {
      width: 260px;
      height: 190px;
      line-height: 190px;
      background: rgba(11, 17, 51, 0.85);
      display: flex;
      align-self: center;
      justify-content: center;
    }
    .n-c {
      width: 260px;
      height: 40px;
      line-height: 35px;
      background: rgba(11, 17, 51, 0.85);
      display: flex;
      align-self: center;
      .n {
        padding: 0 10px;
        color: #fff;
        width: 190px;
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
      }
      .btn {
        padding-left: 10px;
        font-size: 12px;
        font-weight: 400;
        color: #01c4e5;
        text-shadow: 0px 1px 4px #000000;
        cursor: pointer;
      }
    }
    .c-v-c {
      position: absolute;
      left: 272px;
      bottom: 0px;
      width: 236px;
      background: rgba(255, 255, 255, 0.8);
      .action {
        padding: 10px 10px 10px 20px;
        display: flex;
        justify-content: space-between;
        width: 100%;
        font-size: 14px;
        font-weight: 600;
        color: #000000;
        .close {
          cursor: pointer;
          width: 20px;
          height: 20px;
          background: url('../assets/video-close.png') no-repeat;
          background-size: 100% 100%;
        }
      }
      .c-item-c {
        padding: 0 20px;
        width: 100%;
        min-height: 88px;
        max-height: 400px;
        overflow-y: scroll;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .c-item {
          width: 88px;
          text-align: center;
          .c-item-bg {
            width: 88px;
            height: 66px;
            background: #0b1133;
          }
          .c-item-n {
            width: 88px;
            font-size: 12px;
            font-weight: 400;
            color: #000000;
          }
        }
      }
      .s-border {
        border: 3px solid rgba(1, 196, 229, 1);
      }
    }
  }
}
</style>